<!DOCTYPE html>
<html>
<head>
	<title>消息中心</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<#include "../../common/commonCss.html">
	<style type="text/css">
		.panel>.list-group .list-group-item.active {
			color: #555;
			font-weight: bold;
			background-color: transparent;
			border-color: #DDDDDD;
		}
		
		.bar {
			background-color: #51D49A;
			position: absolute;
			left: 0;
			top: 0;
			height: 100%;
			width: 5px;
		}
	</style>
</head>
<body>
	<!-- head -->
	<#include "../../common/commonHead.html">
	
	<div id="wrap">
		<!-- 主体 -->
		<div class="container main">

			<!-- 左侧list面板 -->
			<#include "../list.html">

			<div class="col-md-10">
				<div class="panel panel-default">
					<div class="panel-heading" role="tab" id="collapseListGroupHeading1"><i class="fa fa-commenting-o" aria-hidden="true"></i> 消息中心</div>
					<div>
						<div class="panel-body">
							<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
								<ul class="layui-tab-title">
								  	<li class="layui-this" lay-url="11">通知</li>
								    <li lay-url="22">我的私信</li>
								    <li lay-url="33">我的留言</li>
								</ul>
								<div class="layui-tab-content" style="height: 100px;">
								  <div class="layui-tab-item layui-show">通知消息</div>
								  <div class="layui-tab-item">私信内容</div>
								  <div class="layui-tab-item">留言内容</div>
								</div>
							</div> 
						</div>
					</div>
				</div>
			</div>
		</div>

	</div>

	<!-- 底部 --> 
	<#include "../../common/commonFoot.html"> 
	<!-- <div class="weather"><iframe width="250" scrolling="no" height="60" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&amp;id=12&amp;icon=1&amp;num=1"></iframe></div> -->
	<#include "../../common/commonJs.html">
	<script type="text/javascript" src="resources/Front/js/blog.js"></script>
	<script type="text/javascript">
		layui.use('element', function(){
	  		var $ = layui.jquery,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
	  		element.on('tab(docDemoTabBrief)', function(data){
	  		  console.log(this); //当前Tab标题所在的原始DOM元素
	  		  console.log(data.index); //得到当前Tab的所在下标
	  		  console.log(data.elem); //得到当前的Tab大容器
	  		});
  		});
	</script>
</body>
</html>